<template>
  <view class="cm-float" :style="[sizeStyle, posStyle, cmStyle]" :class="[cmClass]">
    <view class="cm-float-item" v-for="(item, index) in itemsData" :key="index"
      :style="[getItemStyle(index)]">
      <cm-button radius="circle" :type="item.type" :outlined="item.outlined" :border="item.border"
        :shadow="item.shadow"
        cm-class="cm-w-100 cm-h-100 cm-padding-0 cm-flex cm-flex-col"
        @click="clickHandler(item, index)">
        
        <cm-icon :cm-style="triggerStyle"
          :size="item.size" :type="item.icon" v-if="item.icon && !item.img">
          <cm-badge cm-class="cm-tabbar-badge"
            :text="item.badgeTxt" :min-num="item.badgeMin" :max-num="item.badgeMax"></cm-badge>
        </cm-icon>
        <!-- 图片的优先级高于ICON -->
        <cm-img :width="item.width" :height="item.height" :src="item.img" v-if="item.img">
          <cm-badge class="cm-tabbar-badge"
            :text="item.badgeTxt" :min-num="item.badgeMin" :max-num="item.badgeMax"></cm-badge>
        </cm-img>
        <!-- 文字 -->
        <view class="cm-text-12 cm-margin-top-3">{{ item.text }}</view>
        
      </cm-button>
    </view>
  </view>
</template>

<script src="./cm-float.js"></script>

<style lang="stylus">
@import './cm-float.styl'
</style>
